<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue'

const age = ref(10)

const getHouseList = () => { }
getHouseList()

onBeforeMount(() => {
  console.log(`挂载之前--onBeforeMount()`)
})

onMounted(() => {
  // 操作DOM
  console.log(`挂载之后--onMounted()`)
})

onBeforeUpdate(() => {
  console.log(`视图更新之前--onBeforeUpdate()`)
})

onUpdated(() => {
  console.log(`视图更新之后--onUpdated()`)
})

onBeforeUnmount(() => {
  console.log(`组件销毁之前--onBeforeUnmount()`)
})

onUnmounted(() => {
  console.log(`组件销毁之后--onUnmounted()`)
})

</script>

<template>
  <div>
    <div>{{ age }}</div>
    <button @click="age++">修改年龄</button>
  </div>
</template>

<style scoped></style>
